<template>
    <div>
        <!-- 表格头部 -->
        <div class="table-view" :style="{'height':tableHeight}" >
            <el-table :data="dataList" style="width: 100%" stripe border>
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
        </div>
        <!-- 列表数据 -->
        <div style="text-align: center;background:white;border-top: solid 1px #ebeef5;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[20, 50, 100, 200]"
                :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="count" style="padding:10px 0">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            dataList: Array,
            page:Number,
            count:Number
        },
        data() {
            return {
                
            }
        },
        created() {
            // console.log(this.dataList);
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        computed:{
            tableHeight(){
                var topHeight = 70+48+5;
                var queryHead = 58;
                topHeight +=queryHead;                
                return (window.innerHeight-topHeight)+'px';
            }
        }
    }
</script>
<style>
    .table-view{
        overflow: auto;
        
    }
</style>